<template>
  <div class="artic-list">
    <section v-for="item in list" :key="item.id" class="artic-item">
      <div class="title">{{ item.title }}</div>
      <div>
        <span class="sub-info">央视新闻</span>
        <span class="sub-info">23454</span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  created () {},
  methods: {}
}
</script>

<style lang='less' scoped>
.artic-list {
  .artic-item {
      padding: 20px 0;
    .title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
      color:#333;
      cursor: pointer;
      &:hover {
          color: red;
      }
    }
    .sub-info {
        font-size: 14px;
        color: #999;
        margin-right: 8px;
    }
  }
}
</style>
